<template>
	<div>
		<h1 class="title">找回密码</h1>
		<el-form ref="formRef" :model="form" :rules="rules" style="margin-top: 50px; padding: 0 50px" label-width="60px">
			<el-form-item label="登录名" prop="username">
				<el-input v-model="form.username" placeholder="电子邮箱"></el-input>
			</el-form-item>
			<el-form-item label="验证码">
				<el-input style="width: 228px;margin-right: 10px;" v-model="form.code" placeholder="请输入验证码"></el-input>
				<el-button type="primary" @click="sendemail" plain>
					<div v-if="form.flag">重发验证码</div>
					<div v-else>发送验证码</div>
				</el-button>
			</el-form-item>
			<el-form-item  label="新密码">
				<el-input show-password placeholder="请输入新的密码" v-model="form.password"></el-input>
			</el-form-item>
			<el-form-item label-width="0">
				<el-button style="width: 100%;" plain type="primary" @click="fixPassword ">
					<div >重置密码</div>
				</el-button>
			</el-form-item>
			<el-form-item label-width="0">
				<el-link style="position: absolute; right: 0; " :underline="false" @click="backLogin">回到登录</el-link>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { reactive,ref } from 'vue'
import { get,post } from "@/plugins/axios"
import { ElMessage } from 'element-plus'
import path from './path'
const emits = defineEmits('update:r')
const form = reactive({
	username: '',
	code: null,
	password:null,
	flag:false
})
// 验证码
const captcha = ref({})
const formRef = ref(null);  
const rules = reactive({  
  username: [  
		{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
		{ validator: check, message: '该账户不存在', trigger: 'blur' ,fieldName: 'email'}
  ]
});  
function check(rule,value,callback){
  let params = {
    column: rule.fieldName,
    value,
  }
  get(path.check,params,content => {
    // content == response.data.content
    if(!content){
      // 可用
      callback()
    } else {
      // 不可用
      callback(new Error())
    }
  })
}
function backLogin () {
	emits('update:r', '0deg')
}
function sendemail(){
	post(path.sendemail,{to:form.username,state:"修改密码"},content => {})
	form.flag = true
}

function fixPassword(){
	post(path.fixPassword,{
		username:form.username,
		password:form.password,
	  code:form.code},
		content => {
			backLogin()
	})
}
</script>

<style scoped lang="scss">
.title {
	text-align: center;
	margin-top: 20px;
	letter-spacing: 2rem;
}
</style>